@import "mixin_helpers";

$radius: 3px;
$border-color: rgba(0,0,0,.5);

@mixin breadcrumb-button($top-color, $bottom-color, $color) {

  @include text-shadow(0 1px 1px $top-color, 0 -1px 1px $bottom-color);

  .breadcrumb-label {
    color: $color;
  }

  @include std-bg($top-color, $bottom-color);
  &:hover {
    @include background(linear-gradient(bottom, $bottom-color, $top-color));

    .breadcrumb-arrow span {
      background-color: $bottom-color;
      background: -moz-linear-gradient(135deg, $bottom-color, $top-color);
      background: -ms-linear-gradient(135deg, $top-color, $bottom-color);
      background: -o-linear-gradient(135deg, $top-color, $bottom-color);
      background: -webkit-gradient(linear, left top, right bottom, from($top-color), to($bottom-color));
    }
  }

  .breadcrumb-arrow {
    span {
      background-color: $top-color;
      background: -moz-linear-gradient(135deg, $bottom-color, $top-color);
      background: -ms-linear-gradient(135deg, $bottom-color, $top-color);
      background: -o-linear-gradient(135deg, $bottom-color, $top-color);
      background: -webkit-gradient(linear, right bottom, left top, from($bottom-color), to($top-color));
    }
  }

}

$breadcrumb-colors: yellow #FFD972, blue #a5cae1;

#breadcrumbs {
  display: inline-block;

  padding-right: 20px;
  @include box-sizing(border-box);
  @include border-radius($radius);
  @include box-shadow(0 0 0 1px #cccccc inset, 0 1px 0px rgba(255,255,255,.6), 0 1px 0 1px rgba(255,255,255,.6) inset);

  @include std-bg(#fafafa, #ececec);
  width: 100%;


  .breadcrumb-button {
    .breadcrumb-label {
      @include box-shadow(0px 1px 0px rgba(255,255,255,.5) inset);
      @include border-top-left-radius(3px);
      @include border-bottom-left-radius(3px);
    }
  }





  .breadcrumb-button {

    &.yellow {

      @include breadcrumb-button(#FFD972, #FFBA49, #5C481D);
      .breadcrumb-label {
        box-shadow: 0px 1px 0px rgba(255,255,255,.5) inset;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom: 1px solid #C99337;
        border-left: 1px solid #D79D3B;
        border-top: 1px solid #F5B244;
      }

      .breadcrumb-arrow span {
        box-shadow: 1px -1px 0px #E29B1E, 1px -1px 1px #F09900;
      }
    }

    &.blue {

      @include breadcrumb-button(#92CFF5, #68A6CE, #fff);

      .breadcrumb-label {
        font-weight: 600;
        box-shadow: 0px 1px 0px rgba(255,255,255,.5) inset;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom: 1px solid darken(#60a1ca, 10);
        border-left: 1px solid #60a1ca;
        border-top: 1px solid lighten(#60a1ca, 5);

        &:hover {
          color: white;

          .breadcrumb-label {
            color: white;
          }
        }
      }

      .breadcrumb-arrow span {
        box-shadow: 1px -1px 0px #7599AF, 1px -1px 1px #45A8E7;
      }
    }

    .breadcrumb-label {
      box-shadow: 0px 1px 0px rgba(255,255,255,.5) inset;

      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;

    }

    .breadcrumb-arrow span {
      box-shadow: 1px -1px 0px #ccc, 1px -1px 1px #ccc;
    }

    @include breadcrumb-button(#fafafa, #ececec, #888);

    display: inline-block;
    cursor: pointer;
    margin-right: -20px;

    &:first-child {
      @include border-radius($radius 0 0 $radius);

      .breadcrumb-label {
        border-top-left-radius: $radius;
        border-bottom-left-radius: $radius;
      }
    }

    &:last-child {
      @include border-radius(0 $radius $radius 0);
    }

    &:first-child .breadcrumb-label {
      padding-left: 15px;
    }

    &:last-child {
      .breadcrumb-label {
        padding-right: 15px;
      }
      .breadcrumb-arrow {
        display: none;
      }
    }

    .breadcrumb-label {
      padding: 8px;
      -moz-user-select: none;
      -webkit-user-select: none;
      display: inline-block;
      padding-left: 25px;
    }

    .breadcrumb-arrow {
      width: 17px;
      height: 34px;
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      margin-left: -5px;

      span {
        border-radius: 4px;
        width: 26px;
        height: 30px;
        display: inline-block;
        @include transform(rotate(45deg));

        margin-left: -16px;
        margin-top: 3px;
        //box-shadow: 1px -1px 1px $border-color;
      }
    }

    &:hover .breadcrumb-arrow span {
      //box-shadow: -1px 1px 2px rgba(255, 255, 255, 0.25), inset -1px 1px 1px rgba(0, 0, 0, 0.25);
    }
  }
}


.breadcrumb-line {
  color: #666;
  height: 28px;
  @include box-shadow(0 1px 0 #fff, 0 1px 0 #fff inset);
  @include std-bg(#F4F4F4, #E3E3E3);
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 11px;

  .breadcrumbs {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      float: left;
      line-height: 28px;
      margin-left: 10px;

      &:after {
        content: ">";
        margin-left: 10px;
      }

      &:last-child:after { content: ""; }

      &:first-child { margin-left: 20px; }

      &.current {color: #888;}
    }
  }

  .nav.pull-right {
    margin-right: 20px;
    border-right: 1px solid #ccc;

    .badge {
      margin-left: 4px;
    }
  }

  .nav .dropdown-toggle .caret {
    margin-top: 12px;
  }

  .nav > li > a {
    @include text-shadow(none);
    line-height: 28px;
    height: 28px;
    margin: 0;
    padding: 0 15px;
    border-left: 1px solid #ccc;
    @include border-radius(0);
    color: #666;

    strong {
      color: #B35D5D;
      margin-left: 4px;
    }
  }
}

